<!--  -->
<template>
  <div class='topBar'>
    <div class="topLeftPlace">
      <div
        @click="changePagePath(index,item)"
        :class="!item.ischecked ? 'innerTabs' : 'checkedTabs'"
        v-for="(item,index) in topbarArr"
        :key="index">
        <span class="roundTips"></span>
        {{ item.name === undefined ? '' : item.name}}
        <i class="el-icon-close" @click.stop="closePagePath(index,item)" v-show="index > 0"></i>
      </div>
    </div>
    <div class="topRightPlace">
      
    </div>

  </div>
</template>

<script>
import storages from '@/until/localStorage';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        setActiveID: storages.getItem('setActive'),
        liveFun: function (paramsArr) {
          const nullArr = []
          if (paramsArr instanceof Array) {
            for (const item of paramsArr) {
              nullArr.push(item.perms)
            }
          }
          return nullArr
        }
      };
    },
    props: {
    },
  //监听属性 类似于data概念
  computed: {
    topbarArr(){
      let standby;
      if (JSON.parse(storages.getItem('topbarArr')) === null) {
        standby = []
      } else {
        standby = JSON.parse(storages.getItem('topbarArr'))
      }
      return this.$store.state.topBarArr.length === 0 ? standby : this.$store.state.topBarArr
    }
  },
  //监控data中的数据变化
  watch: {
  },
  //方法集合
  methods: {
    // 切换页面
    changePagePath(index,item){
      for (const el of this.topbarArr) {
        el.ischecked = false
      }
      this.topbarArr[index].ischecked = true
      this.$router.push({
        path: '/'+ item.path
      })
      this.$store.commit('setTopBar',JSON.stringify(this.topbarArr))
      storages.setItem({
        name: "topbarArr",
        value: JSON.stringify(this.topbarArr)
      })
      this.$store.commit('setActive',this.topbarArr[index].id+'')
      storages.setItem({
        name: "setActive",
        value: this.topbarArr[index].id+''
      })
      this.$forceUpdate()
      const nullArr = []
      if (item.children === undefined) {
        // console.log(1);
      } else {
        for (const el of item.children) {
          nullArr.push(el.perms)
        }
        storages.setItem({
          name: "permissionsButtonArr",
          value: JSON.stringify(nullArr)
        })
      }
    },
    // 关闭页面
    closePagePath(index,item){
      // console.log(index,item)
      if (index === 0 && this.topbarArr.length === 1) {
        const nullArr = []
        this.$store.commit('setTopBar',JSON.stringify(nullArr))
        storages.setItem({
          name: "topbarArr",
          value: JSON.stringify(nullArr)
        })
        this.$store.commit('setActive',null)
        storages.setItem({
          name: "setActive",
          value: null
        })
        storages.setItem({
          name: "permissionsButtonArr",
          value: JSON.stringify([])
        })
      } else if(index === 0 && !item.ischecked){
        this.topbarArr.splice(0,1)
        this.$store.commit('setTopBar',JSON.stringify(this.topbarArr))
        storages.setItem({
          name: "topbarArr",
          value: JSON.stringify(this.topbarArr)
        })
      } else if(index === 0 && item.ischecked){
        this.topbarArr.splice(0,1)
        this.topbarArr[index].ischecked = true
        this.$router.push({
          path:'/' + this.topbarArr[index].path
        })
        this.$store.commit('setActive',this.topbarArr[index].id+'')
        storages.setItem({
          name: "setActive",
          value: this.topbarArr[index].id+''
        })
        this.$store.commit('setTopBar',JSON.stringify(this.topbarArr))
        storages.setItem({
          name: "topbarArr",
          value: JSON.stringify(this.topbarArr)
        })
        let result = this.liveFun(this.topbarArr[index].children)
        storages.setItem({
          name: "permissionsButtonArr",
          value: JSON.stringify(result)
        })
      } else if(index > 0 && item.ischecked) {
        this.topbarArr.splice(index,1)
        sessionStorage.setItem('spliceArr', true)
        // console.log(this.topbarArr);
        this.topbarArr[index-1].ischecked = true
        this.$router.push({
          path:'/' + this.topbarArr[index-1].path
        })
        let topbarArr_for = JSON.stringify(this.topbarArr)
        this.$store.commit('setTopBar', topbarArr_for)
        storages.setItem({
          name: "topbarArr",
          value: topbarArr_for
        })
        this.$store.commit('setActive',this.topbarArr[index-1].id+'')
        storages.setItem({
          name: "setActive",
          value: this.topbarArr[index-1].id+''
        })
        let result = this.liveFun(this.topbarArr[index-1].children)
        storages.setItem({
          name: "permissionsButtonArr",
          value: JSON.stringify(result)
        })
      } else {
        let result = this.topbarArr.splice(index,1)
        // console.log(result,this.topbarArr,'---------------------------');
        
        this.$store.commit('setTopBar',JSON.stringify(this.topbarArr))
        // console.log(this.topbarArr)
        storages.setItem({
          name: "topbarArr",
          value: JSON.stringify(this.topbarArr)
        })
        let arr = [1,2,3,4,5,6]
        
        // console.log(arr.splice(1));
        
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let div = document.querySelector(".topBar");
    // 监听 dom
    div.addEventListener("wheel", function (e) {
      let left = -e.wheelDelta || e.deltaY / 2;
      // 修改滚动条位置
      div.scrollLeft = div.scrollLeft + left;
    });
  },
  beforeDestroy() {
    // 移除监听器，以防止内存泄漏
    window.removeEventListener('click', this.hideContextMenu);
  }
}
</script>
<style lang='scss' scoped>
.context-menu {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}
  //@import url(); 引入公共css类
.topBar {
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  display: flex;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.12),0 0 3px 0 rgba(0,0,0,.04);
  border-bottom: 1px solid #d8dce5;
  background: #fff;
  overflow-x: scroll;
  overflow-y: hidden;
  position: relative;
  .topLeftPlace {
    display: flex;
    width: 95%;
    height: 40px;
    .innerTabs {
      white-space: nowrap;
      text-align: center;
      width: fit-content;
      padding: 0 10px;
      height: 25px;
      margin: 7.5px 3px;
      line-height: 25px;
      border: 1px solid $config-border-color;
      font-size: $font-size-mini;
      cursor:pointer;
    }
    .checkedTabs {
      position: relative;
      white-space: nowrap;
      text-align: center;
      width: fit-content;
      padding: 0px 5px 0 15px;
      height: 28px;
      margin: 6px 3px;
      line-height: 28px;
      background: $color-primary;
      border: 1px solid $color-primary;
      font-size: $font-size-mini;
      color: #fff;
      cursor:pointer;
      .roundTips {
        top: 10px;
        left: 5px;
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
      }
    }
    .el-icon-close {
      border-radius: 50%;
      transition: all .3s cubic-bezier(0.65, 0.05, 0.36, 1);
      padding: 3px;
    }
    .el-icon-close:hover {
      font-size: 12px;
      background-color: #42b983;
      color: #fff;
    }
  }
  .topRightPlace {
    width: 5%;
    height: 40px;
    // background: #ff0;
  }
}
.topBar::-webkit-scrollbar{
    height:3px;
    background-color: #969696;
}
.topBar::-webkit-scrollbar-track{
    background: #fff;
    border-radius:2px;
}
.topBar::-webkit-scrollbar-thumb{
    background: #969696;
    border-radius:8px;
}
.topBar::-webkit-scrollbar-thumb:hover{
    background: #a5a5a5;
}
.topBar::-webkit-scrollbar-corner{
    background: #969696;
}

</style>
